<!-- 个人信息详情 -->
<template>
	<view class="content">
		<!-- 头像 -->
		<view>
			<text>头像</text>
			<view style="display: flex;align-items: center;">
				<button class="tl-p-r tl-img-60" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
				<u-icon name="arrow-right" color="#d0cccc" size="20" class="jh-m-l-20"></u-icon>

			</view>

		</view>



		<view>
			<text>昵称</text>
			<view style="display: flex;align-items: center;">
				<input style="color: #999999;margin-right: 15rpx;width: 5em; text-align: right;" v-model="nickName"
					@blur="inputName" @input="inputName" type="nickname" />
				<u-icon name="arrow-right" color="#d0cccc" size="20" class="jh-m-l-20"></u-icon>
			</view>
		</view>


		<view @click="showSSex = true">
			<text>性别</text>
			<view style="display: flex;align-items: center;">
				<view v-if="sex ===2"
					style="margin-right: 15rpx;
				color: #ffffff;background-color: #ec808d;font-size: 25rpx;border-radius: 180rpx;height: 35rpx;width: 35rpx;text-align: center;">♀
				</view>

				<view v-if="sex ===1" style="color: #ffffff;margin-right: 15rpx;
				background-color: #5eb9e9;font-size: 25rpx;border-radius: 180rpx;height: 35rpx;width: 35rpx;text-align: center;">♂
				</view>


				<text v-if="sex === 1" style="color: #999999;margin-right: 20rpx;margin-top: -5rpx;">男</text>
				<text v-else-if="sex === 2" style="color: #999999;margin-right: 20rpx;margin-top: -5rpx;">女</text>
				<text v-else style="color: #999999;margin-right: 20rpx;margin-top: -5rpx;">保密</text>

				<u-icon name="arrow-right" color="#d0cccc" size="20" class="jh-m-l-20"></u-icon>
			</view>
		</view>
		<u-picker :show="showSSex" :columns="columns" @confirm="onConfirm" @close="showSSex = false"></u-picker>
		<view>
			<text>手机号</text>
			<view style="display: flex;align-items: center;">
				<text style="color: #999999;margin-right: 20rpx;">{{phoneNumber}}</text>

			</view>
		</view>
		<view class="exit-login" @click="exitToken">
			<text>退出登录</text>

		</view>


		<!-- 性别选择弹出窗 -->
		<van-popup custom-style="height: 50%;width: 100%" duration="1000" position="bottom" :show="showSSex"
			@close="onClose">
			<view style="padding: 25rpx;">
				<van-radio-group v-model="sex">
					<van-cell-group>
						<van-cell title="男" clickable data-name="0" @click="sexOnClick">
							<van-radio slot="right-icon" :name="1" />
						</van-cell>
						<van-cell title="女" clickable data-name="1" @click="sexOnClick">
							<van-radio slot="right-icon" :name="2" />
						</van-cell>
						<van-cell title="保密" clickable data-name="2" @click="sexOnClick">
							<van-radio slot="right-icon" :name="3" />
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</view>


		</van-popup>
	</view>
</template>

<script>
	import {
		listOpenId,
		updateName
	} from '../../api/my/index.js'
	export default {

		data() {
			return {
				//性别选择 弹出
				showSSex: false,
				sex: 1,
				users: {

				},
				nickName: '昵称',
				avatarUrl: '',
				phoneNumber: '',
				columns: [
					[
						'男', '女', '保密'
					]
				],
			}
		},
		onLoad() {
			const openId = uni.getStorageSync('openId');
			console.log(openId, 'openId')
			listOpenId({
				openId: openId
			}).then(res => {
				this.users = res.data
				this.avatarUrl = res.data.avatarUrl
				this.sex = res.data.sex
				this.nickName = res.data.nickName
				// this.phoneNumber = res.data.phone
			})
			// 获取手机号
			// const phones = uni.getStorageSync('phone')
			// console.log()
		},
		methods: {
			// 选择男女
			onConfirm(e) {
				console.log();
				this.sex = e.indexs[0] + 1
				this.showSSex = false
				this.enterSexEdit()
			},
			// 修改名称
			inputName(e) {
				this.nickName = e.detail.value
				updateName({
					openid: wx.getStorageSync('openId'),
					nickName: this.nickName
				}).then(res => {
					console.log(res)
				})
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
				updateName({
					openid: wx.getStorageSync('openId'),
					avatarUrl: avatarUrl
				}).then(res => {
					console.log(res)
				})
			},
			//性别选择 关闭弹出
			onClose() {
				this.sex = this.users.sex
				this.showSSex = false
			},
			// 性别确定
			sexOnClick(event) {
				const {
					name
				} = event.currentTarget.dataset;
				this.sex = name

			},
			enterSexEdit() {
				this.showSSex = false
				updateName({
					openid: wx.getStorageSync('openId'),
					sex: this.sex
				}).then(res => {
					console.log(res)
				})
			},
			sendEditPass() {
				uni.navigateTo({
					url: '/components/editPassword/editPassword'
				})
			},
			exitToken() {
				uni.clearStorage()
				uni.showToast({
					title: '成功退出登录',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/my/my',
					});
				}, 300)
			}

		}
	}
</script>

<style scoped>
	.exit-login {
		background-color: #04BC16 !important;
		justify-content: center !important;
		font-weight: 600;
		color: #fff;
	}

	.tl-p-r image {
		position: absolute;
		left: -10%;
		top: -15rpx;
	}

	.tl-img-60 {

		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}


	.content {
		min-height: 100vh;
		width: 100%;
		background-color: #f2f2f2;
		padding: 25rpx;
		box-sizing: border-box;
	}

	image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 150rpx;
		margin-right: 25rpx;
	}

	.content>view {
		box-shadow: 1px 1px 1px #f6f6f6, -1px -1px 1px #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 25rpx;
		border-radius: 15rpx;
		margin-bottom: 25rpx;
	}

	.content text {
		font-size: 27rpx;
	}
</style>